﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
@font-face
{
	font-family: 'Roboto Regular';
	font-style: normal;
	font-weight: normal;
	src: url('fonts/Roboto-Regular.ttf'), url('fonts/Roboto-Regular.eot');
}
body
{
	width: 408px;
	height: 408px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.bar
{
	width: 400px;
	position: absolute;
	bottom: 4px;
	left: 4px;
	vertical-align: middle;
}
.bar .background
{
	background-color: #000;
	filter: alpha(opacity=70);
	opacity: 0.7;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#waypoint
{
	font-family: 'Roboto Regular';
	color: #fff;
	position: relative;
	bottom: 1px;
	left: 2px;
	z-index: 2;
	font-size: 10px;
	padding-top: 4px;
	padding-left: 2px;
}
#zone
{
	font-family: 'Roboto Regular';
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 6px;
	left: 6px;
	filter: progid:DXImageTransform.Microsoft.Glow(color=000000,strength=3);
	z-index: 1;
	cursor: pointer;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#container
{
	overflow: hidden;
	width: 400px;
	height: 400px;
	position: absolute;
	left: 4px;
	top: 4px;
}
#image
{
	border: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#image, #viewarea-highlight, #viewarea
{
	cursor: url(images/cursor/openhand.cur), default;
}
#image.active, #viewarea.active
{
	cursor: url(images/cursor/closedhand.cur), default;
}
#mini
{
	border: 0px;
	position: absolute;
	right: 4px;
	bottom: 4px; /*18px*/
	display: none;
}
#minimize-mini
{
	position: absolute;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
	background: url(images/button-minus.png) no-repeat center;
	cursor: pointer;
	filter: alpha(opacity=50);
	opacity: 0.5;
	z-index: 1;
}
#minimize-mini:hover
{
	filter: alpha(opacity=90);
	opacity: 0.9;
}
#viewarea
{
	border: 1px solid #f00;
	width: 20px;
	height: 20px;
	position: absolute;
}
#mini .darken
{
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
	background-color: #000;
	filter: alpha(opacity=35);
	opacity: 0.35;
	z-index: 0;
}
.tag
{
	position: absolute;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
#tooltip
{
	position: absolute;
	top: 100px;
	left: 100px;
	color: #fff;
	z-index: 1;
	
	font-family: 'Roboto Regular';
	font-size: 12px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	
	display: none;
}
#tooltip input
{
	font-family: 'Roboto Regular';
	font-size: 10px;
	border: 0px;
	background: none;
	color: #999;
	width: 70px;
}
#tooltip .darken
{
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	filter: alpha(opacity=80);
	opacity: 0.8;
}
#waypoint a
{
	color: #999;
	text-decoration: none;
}
#measure
{
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
}
.event-or
{
	margin-left: 2px;
	margin-right: 2px;
	color: #999;
	font-size: 10px;
}
input[type="text"]::selection
{
	background: #666;
	color: #ccc;
}
</style>
<script type="text/javascript" language="javascript" src="js/events.js"></script>
<script type="text/javascript" language="javascript" src="js/transition.js"></script>
<script type="text/javascript" language="javascript">

var events = [];
for (var id in event_data)
	events.push(event_data[id]);

var cursor = null;
var sizes = {};
var elements = {};
var mapOffset = null;
var waypoints = null;

function init()
{
	var container = document.getElementById("container");
	var image = document.getElementById("image");
	var mini = document.getElementById("mini");
	var viewarea = document.getElementById("viewarea");
	var tags = document.getElementById("tags");
	
	elements.container = container;
	elements.image = image;
	elements.mini = mini;	
	elements.viewarea = viewarea;
	elements.tags = tags;
	elements.minimize = document.getElementById("minimize-mini");
	elements.minimize.state = false;
	
	elements.tooltip = 
	{
		container: document.getElementById("tooltip"),
		text: null,
		level: null,
		code: null,
		
		reset: function()
		{
			this.level.style.display = "none";
			this.code.style.display = "none";
		},
		
		showWaypoint: function(name, code)
		{
			this.reset();
			this.text.innerHTML = resizeText(name, 300).text;
			this.code.value = code;
			this.code.style.display = "block";
		},
		
		showEvent: function(name, level)
		{
			this.reset();
			this.text.innerHTML = resizeText(name, 300).text;
			this.level.innerHTML = level;
			this.level.style.display = "inline";
		}
	}
	
	elements.tooltip.text = elements.tooltip.container.getElementsByTagName("span");
	elements.tooltip.level = elements.tooltip.text[1];
	elements.tooltip.text = elements.tooltip.text[0];
	elements.tooltip.code = elements.tooltip.container.getElementsByTagName("input")[0];
	
	elements.waypoint = document.getElementById("waypoint").getElementsByTagName("span")[0];
	
	elements.tooltip.container.transition = new Transition(elements.tooltip.container, 0, 0, 100);
	
	sizes.container =
	{
		width: container.clientWidth,
		height: container.clientHeight
	}
	
	viewarea.style.top = "2px";
	viewarea.style.left = "2px";
	
	if (window.addEventListener && window.top == window)
	{
		window.addEventListener("mousemove", onMouseMove, false);
		window.addEventListener("mouseup", onMouseUp, false);
	}
	else
	{
		//window events not supported with gadgets
		//using document events as a workaround
		
		var width = document.body.offsetWidth; //width/height checks needed for iframe support
		var height = document.body.offsetHeight;
		
		document.onmousemove = onMouseMove;
		document.onmouseup = onMouseUp;
		document.onmouseout = function(event)
		{
			event = event || window.event;
			if (event.clientX < 0 || event.clientY < 0 || event.clientX >= width || event.clientY >= height)
			{
				onMouseUp(event);
			}
		}
	}
}
function loadMap(map)
{
	var src =
	{
		large: "images/maps/large/" + map.srcKey + ".jpg",
		mini: "images/maps/mini/" + map.srcKey + ".png"
	}
	
	mapOffset =
	{
		x: map.clip.x,
		y: map.clip.y
	}
	
	elements.image.offset =
	{
		x: 0,
		y: 0
	}
	
	var selectedWaypoint = map.waypoints.list[map.waypoints.selected];
	
	waypoints = 
	{
		list: map.waypoints.list,
		selected: map.waypoints.selected
	}
		
	loadImage(src.large,
		function(img)
		{
			if (!img)
				return;
				
			sizes.image =
			{
				width: img.width,
				height: img.height
			}
			
			elements.image.style.width = img.width + "px";
			elements.image.style.height = img.height + "px";
			elements.image.style.background = "url('" + img.src + "') no-repeat";
			
			loadImage(src.mini,
				function(img)
				{
					if (!img)
						return;
						
					sizes.mini = 
					{
						width: img.width,
						height: img.height
					}
					
					elements.mini.style.width = img.width + "px";
					elements.mini.style.height = img.height + "px";
					elements.mini.style.background = "url('" + img.src + "') no-repeat";
					
					var h = document.getElementById("viewarea-highlight");
					h.style.left = (2 + mapOffset.x * 0.05) + "px"
					h.style.top = (2 + mapOffset.y * 0.05) + "px"
					h.style.width = (sizes.image.width * 0.05) + "px";
					h.style.height = (sizes.image.height * 0.05) + "px";
					h.style.background = "url('" + img.src + "') no-repeat -" + h.style.left + " -" + h.style.top;
					
					elements.mini.style.display = "block";
					elements.mini.offset = getPosition(elements.mini);
	
					setOffset(
					{ 
						x: sizes.container.width / 2 - selectedWaypoint.x, 
						y: sizes.container.height / 2 - selectedWaypoint.y 
					}, true);
					
					showWaypointTooltip(selectedWaypoint);
				});
		});
	
	var existing = elements.tags.childNodes.length;
		
	if (map.waypoints)
	{	
		for (var i = 0, length = map.waypoints.list.length; i < length; i++)
		{
			var waypoint = map.waypoints.list[i];
			var div = null;
			
			if (existing > 0)
			{
				div = elements.tags.childNodes[--existing];
			}
			else
			{
				div = document.createElement("div");
				div.className = "tag";
				div.onclick = onTagClick;
				div.onmouseover = onTagOver;
				elements.tags.appendChild(div);
			}
			
			div.tagData =
			{
				waypoint: waypoint
			}
			
			div.style.left = (waypoint.x - 15) + "px";
			div.style.top = (waypoint.y - 15) + "px";
			div.style.display = "block";
		}
		
		document.getElementById("waypoint").getElementsByTagName("a")[0].style.display = map.waypoints.list.length > 1 ? "inline" : "none";
	}
	else
		document.getElementById("waypoint").getElementsByTagName("a")[0].style.display = "none";
	
	if (map.events)
	{
		for (var i = 0, length = map.events.length; i < length; i++)
		{
			var e = map.events[i];
			var div = null;
			
			if (existing > 0)
				div = elements.tags.childNodes[--existing];
			else
			{
				div = document.createElement("div");
				div.className = "tag";
				div.onclick = onTagClick;
				div.onmouseover = onTagOver;
				elements.tags.appendChild(div);
			}
			
			div.tagData =
			{
				event: e
			}
			
			div.style.left = (e.x - 15) + "px";
			div.style.top = (e.y - 15) + "px";
			div.style.display = "block";
		}
	}
	
	while (existing > 0)
	{
		elements.tags.childNodes[--existing].style.display = "none";
	}
	
	var zone = document.getElementById("zone");
	zone.innerHTML = map.name;
	zone.onclick = function()
	{
		window.open("http://wiki.guildwars2.com/wiki/" + map.name.replace(" ", "_"));
	}
	
	elements.waypoint.innerHTML = selectedWaypoint.name;
}
function nextWaypoint()
{
	waypoints.selected = (waypoints.selected + 1) % waypoints.list.length;
	var w = waypoints.list[waypoints.selected];
	
	setOffset(
	{ 
		x: sizes.container.width / 2 - w.x, 
		y: sizes.container.height / 2 - w.y 
	}, true);
	
	elements.waypoint.innerHTML = w.name;
	showWaypointTooltip(w);
}
function onTagClick(event)
{
	if (this.tagData)
	{
		if (this.tagData.waypoint)
		{
			for (var i = 0, length = waypoints.list.length; i < length; i++)
			{
				if (waypoints.list[i] === this.tagData.waypoint)
				{
					waypoints.selected = i;
					break;
				}
			}
			showWaypointTooltip(this.tagData.waypoint);
		}
		else if (this.tagData.event)
		{
			showEventTooltip(this.tagData.event);
		}
	}
}
function onTagOver(event)
{
	if (this.tagData && !cursor)
	{
		if (this.tagData.waypoint)
			showWaypointTooltip(this.tagData.waypoint);
		else if (this.tagData.event)
			showEventTooltip(this.tagData.event);
	}
}
function showWaypointTooltip(waypoint)
{
	elements.tooltip.showWaypoint(waypoint.name, waypoint.code);	
	showTooltip(waypoint.x, waypoint.y);
}
function showEventTooltip(event)
{
	elements.tooltip.reset();
	
	var name = event.name;
	var level = "<span style=\"font-size: 10px; color: #999; margin-left: 5px;\">" + event.level + "</span>";
	var levelSize = measureText(level);
	
	if (name.indexOf("|") != -1)
	{
		name = name.split("|");
		var html = "";
		
		for (var i = 0, length = name.length; i < length; i++)
		{
			var r = resizeText(name[i], 300);
			
			for (var j = 0, k = r.lines.length - 1; j < k; j++)
			{
				html += r.lines[j].text + "<br/>";
			}
			
			var last = r.lines[r.lines.length - 1];
			if (last.width + levelSize > 300)
				last = resizeText(last.text, 300 - levelSize).text;
			else
				last = last.text;
			
			html += last + level;
			
			if (i < length - 1)
				html += "<div style=\"width: 100%; height: 1px; background-color: #333; margin: 2px;\"></div>"
		}
		
		elements.tooltip.text.innerHTML = html;
	}
	else
	{
		var r = resizeText(name, 300);
		var html = "";
		
		for (var j = 0, k = r.lines.length - 1; j < k; j++)
		{
			html += r.lines[j].text + "<br/>";
		}
		
		var last = r.lines[r.lines.length - 1];
		if (last.width + levelSize > 300)
			last = resizeText(last.text, 300 - levelSize).text;
		else
			last = last.text;
		
		html += last + level;
		
		elements.tooltip.text.innerHTML = html;
	}
	
	showTooltip(event.x, event.y);
}
function showTooltip(x, y)
{
	var w = elements.tooltip.container;
	
	elements.tooltip.container.transition.fadeIn(100, "block");
	
	x += elements.image.offset.x;
	y += elements.image.offset.y;
	
	var left = x + 20;
	var top = y - 5;
	var width = w.clientWidth;
	var height = w.clientHeight;
	
	if (top + height > sizes.container.height /*- 20*/)
		top = sizes.container.height /*- 20*/ - height;
	else if (top < 4) //4px border
		top = 4;
		
	if (left - 4 + width > sizes.container.width)
	{
		if (left >= sizes.container.width / 2)
			left = Math.max(4, left - 30 - width);
		else
			left = 4 + sizes.container.width - width;
	}
	
	if (x - 10 < left + width && x + 10 > left
		&& y - 10 < top + height && y + 10 > top)
	{
		left = sizes.container.width / 2 - width / 2;
		
		if (y > sizes.container.height / 2)
			top = Math.max(1, y - height - 10);
		else
			top = Math.max(1, y + 20);
	}
	
	w.style.left = left + "px";
	w.style.top = top + "px";
}
function hideTooltip()
{
	if (elements.tooltip.container.style.display != "none")
	{
		elements.tooltip.container.transition.fadeOut(200, "none");
	}
}
function loadImage(src, callback)
{
	var img = new Image();
	img.onload = function()
	{
		callback(img);
	}
	img.onerror = function()
	{
		callback(null);
	}
	img.src = src;
}
function onContainerDown(e, event)
{
	hideTooltip();
	
	if (sizes.container && sizes.mini)
	{
		event.cancelBubble = true;
		preventDefault(event);
		
		cursor = 
		{
			x: event.clientX,
			y: event.clientY,
			e: e
		}
		
		elements.image.className = "active";
	}
}
function onMouseUp(event)
{
	if (!cursor)
		return;
		
	event = event || window.event;
	event.cancelBubble = true;
	
	if (cursor.mini)
		elements.viewarea.className = "";
	else
		elements.image.className = "";
	
	var o = getOffset(event);
	setOffset(o, true);
	
	cursor = null;
}
function onMouseMove(event)
{
	if (!cursor)
		return;
		
	event = event || window.event;
	event.cancelBubble = true;
	
	var o = getOffset(event);
	setOffset(o);
	
	return false;
}
function preventDefault(event)
{
    if (event && event.preventDefault)
        event.preventDefault();
    else
        window.event.returnValue = false;
    return false;
}
function getOffset(event)
{
	if (cursor.mini)
	{
		var x = (event.clientX - cursor.offset.x - elements.mini.offset.x) / 0.05 - mapOffset.x - sizes.container.width / 2;
		var y = (event.clientY - cursor.offset.y - elements.mini.offset.y) / 0.05 - mapOffset.y - sizes.container.height / 2;
		
		return { x: -x, y: -y };
	}
	else
	{
		var x = cursor.x - event.clientX;
		var y = cursor.y - event.clientY;
		var image = elements.image;
		
		return { x: image.offset.x - x, y: image.offset.y - y };
	}
}
function setOffset(o, save)
{
	var image = elements.image;
	var viewarea = elements.viewarea;
	
	o =
	{	
		x: Math.max(-sizes.image.width + sizes.container.width, Math.min(0, o.x)),
		y: Math.max(-sizes.image.height + sizes.container.height, Math.min(0, o.y))
	}
	
	image.style.left = o.x + "px";
	image.style.top = o.y + "px";
	
	if (save)
	{
		image.offset.x = o.x;
		image.offset.y = o.y;
	}
	
	viewarea.offset =
	{
		x: (1 + (mapOffset.x - o.x) * 0.05),
		y: (1 + (mapOffset.y - o.y) * 0.05)
	}
	viewarea.style.left = viewarea.offset.x + "px";
	viewarea.style.top = viewarea.offset.y + "px";
	
	return o;
}
function onMiniDown(e, event)
{
	hideTooltip();
	
	if (sizes.container && sizes.mini)
	{
		event.cancelBubble = true;
		preventDefault(event);
		
		cursor = 
		{
			x: event.clientX,
			y: event.clientY,
			e: e,
			offset: 
			{ 
				x: 0, 
				y: 0 
			},
			mini: true
		}
		
		//offset the cursor if initiating the drag from within the viewarea box
		if (cursor.x >= elements.viewarea.offset.x + elements.mini.offset.x 
			&& cursor.x <= elements.viewarea.offset.x + elements.mini.offset.x + elements.viewarea.offsetWidth
			&& cursor.y >= elements.viewarea.offset.y + elements.mini.offset.y
			&& cursor.y <= elements.viewarea.offset.y + elements.mini.offset.y + elements.viewarea.offsetHeight)
		{
			cursor.offset.x = 1 + cursor.x - elements.viewarea.offset.x - elements.mini.offset.x - sizes.container.width / 2 * 0.05;
			cursor.offset.y = 1 + cursor.y - elements.viewarea.offset.y - elements.mini.offset.y - sizes.container.height / 2 * 0.05;
		}

		setOffset(getOffset(event));
		
		elements.viewarea.className = "active";
	}
}
function getPosition(e)
{
	var x = y = 0;
	if (e.offsetParent)
	{
		do 
		{
			x += e.offsetLeft;
			y += e.offsetTop;
		} while (e = e.offsetParent);
	}
	
	return {x: x, y: y};
}
function selectText(e)
{
	e.select();
}

function resizeText(text, maxWidth)
{
	var width = measureText(text);
	if (width < maxWidth)
	{
		//no changes
		return { text: text, lines: [{ text: text, width: width }] };
	}
	
	var spaceWidth = measureText("&nbsp;");
	var charactersPerLine = Math.max(1, Math.floor(maxWidth / spaceWidth));
	
	var resized = "";
	var lines = [];
	var start = 0;
	var length = text.length;
	
	do
	{
		var index = text.indexOf(" ", start + charactersPerLine);
		if (index == -1)
		{
			index = length;
			//split word
		}
			
		var line = {};
		line.text = text.substr(start, index - start);
		line.width = measureText(line.text);
		
		if (line.width > maxWidth)
		{
			//remove words until it fits
			while (line.width > maxWidth)
			{
				index = text.lastIndexOf(" ", index - 1);
				if (index < start)
				{
					//word too big
					index = text.indexOf(" ", start);
					if (index == -1)
						index = length;
					
					for (var i = index - 1; i > start; i--)
					{
						line.text = text.substr(start, i - start) + "-";
						line.width = measureText(line.text);
						
						if (line.width <= maxWidth || i == start + 1)
						{
							index = i - 1;
							break;
						}
					}
					
					break;
				}
				else
				{
					line.text = text.substr(start, index - start);
					line.width = measureText(line.text);
				}
			}
		}
		else if (index < length && line.width < maxWidth)
		{
			//add words until the remaining space is used
			var i = index;		
			while (line.width < maxWidth)
			{
				i = text.indexOf(" ", i + 1);
				var t = text.substr(start, i - start);
				var w = measureText(t);
				
				if (w < maxWidth)
				{
					line.width = w;
					line.text = t;
					index = i;
				}
				else
				{
					break;
				}
			}
		}
		
		resized += line.text;
		if (index < length)
			resized += "<br/>";
		lines.push(line);
		start = index + 1;
	} 
	while (start < length);
	
	return { text: resized, lines: lines };
}

function measureText(text, fontFamily, fontSize, fontWeight)
{
	var m = document.getElementById("measure");
	
	m.style.fontFamily = fontFamily || "";
	m.style.fontSize = fontSize || "";
	m.style.fontWeight = fontWeight || "";
	
	m.innerHTML = text;
	
	return m.offsetWidth;
}

function onMinimizeClick()
{
	elements.minimize.state = !elements.minimize.state;
	elements.minimize.style.background = "url(images/button-" + (elements.minimize.state ? "plus" : "minus") + ".png) no-repeat center";
	elements.mini.style.display = elements.minimize.state ? "none" : "block";
}
</script>

<title>DragonTimer</title>
</head>
<body onLoad="init()">

<g:background src="images/waypoint-background.png" style="position: absolute; top: 0px; left: 0px; width: 408px; height: 408px;">

<div id="container" onMouseDown="onContainerDown(this, event)">
	<div id="image">
    	<div id="tags"></div>
    </div>
    <div id="mini" onMouseDown="onMiniDown(this, event)">
    	<div class="darken"></div>
        <div id="viewarea-highlight" style="position: absolute;"></div>
    	<div id="viewarea"></div>
    </div>
	<div id="minimize-mini" onclick="onMinimizeClick()"></div>
</div>

<div id="zone"></div>

<div class="bar" style="display: none;">
    <div class="background"></div>
    <div id="waypoint">
    	<span></span>
        <a href="javascript:void(0)" onClick="nextWaypoint()" style="display: none; position: absolute; right: 7px;">Next</a>
    </div>
</div>

<div id="tooltip">
    <div style="z-index: 1; position: relative;">
        <div id="tooltip-name" style="margin-bottom: 2px; white-space: nowrap;"><span></span><span style="font-size: 10px; color: #999; margin-left: 5px;"></span></div>
        <input id="tooltip-code" type="text" value="" readonly onClick="selectText(this)" />
    </div>
    <div class="darken"></div>
</div>

<span id="measure"></span>

</g:background>

</body>
</html>